<template>
  <div class="synopsis">
    <div class="name">{{jobMsg.jobs_name}}</div>
    <div class="content">{{jobMsg.jobs_city}} | {{jobMsg.jobs_workprop}}</div>
    <div class="salary">{{jobMsg.jobs_salary}}</div>
    <div class="notice iconfont">&#xe642; {{jobMsg.jobs_notice}}</div>  
  </div>
</template>

<script>
export default {
  name: "DetailSynopsis",
  props: {
    jobMsg: Object
  }
};
</script>
<style lang="scss" scoped>
@import "~styles/varibles.styl";
.synopsis {
  position: relative;
  overflow: hidden;
  height: 25vh;
  color: #000000;
  background: #ffffff;
  font-size: 0.32rem;
 .name{
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.45rem;

 }
 .content{
    position: absolute;
    top: 1.2rem;
    left: 0.5rem;
    font-size: 0.25rem;
    color: #444444;


 }
 .salary{
     position: absolute;
    top: 2rem;
    left: 0.5rem;
    color: #ff4444;
 }
 .notice{
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    padding-top: 0.3rem;
    font-size: 0.25rem;
    color: #444444;
    border-top: 1px solid #eeeeee;
 }

}
</style>